<template>
    <!-- 移动端顶部导航栏 -->
    <div class="mobile-nav" v-if="isMobile">
        <div class="mobile-nav-header">
            <div class="mobile-logo">
                <img :src="icon" alt="logo" v-if="icon" />
                <span v-else class="mobile-team-name">{{ teamName }}</span>
            </div>
            <el-button class="mobile-menu-btn" @click="menuVisible = !menuVisible" text>
                <el-icon>
                    <Menu v-if="!menuVisible" />
                    <Close v-else />
                </el-icon>
            </el-button>
        </div>

        <!-- 移动端菜单抽屉 -->
        <el-drawer v-model="menuVisible" direction="rtl" size="180px" :with-header="false" class="mobile-menu-drawer">
            <div class="mobile-menu-content">
                <!-- 用户信息区域 -->
                <div class="mobile-user-section" v-if="user">
                    <el-avatar :src="user.headportrait" :size="40">
                        {{ user.name?.charAt(0) }}
                    </el-avatar>
                    <div class="mobile-user-info">
                        <div class="mobile-user-name">{{ user.name }}</div>
                    </div>
                </div>

                <!-- 导航菜单 -->
                <div class="mobile-nav-menu">
                    <router-link v-for="item in navItems" :key="item.name" v-show="item.visible" :to="item.to"
                        class="mobile-nav-item" @click="closeMenu">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{ item.label }}</span>
                    </router-link>

                    <!-- 管理项（特殊处理） -->
                    <div v-if="managementVisible" class="mobile-nav-item" @click="handleManagement">
                        <el-icon>
                            <Management />
                        </el-icon>
                        <span>管理</span>
                    </div>
                </div>

                <!-- 移动端操作按钮 -->
                <div class="mobile-user-actions">
                    <div v-for="action in userActions" :key="action.command" v-show="action.visible"
                        class="mobile-action-item" :class="{ 'danger': action.danger }"
                        @click="handleAction(action.command)">
                        <el-icon>
                            <component :is="action.icon" />
                        </el-icon>
                        <span>{{ action.label }}</span>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import {
    Checked,
    Close,
    Flag,
    Grid,
    HomeFilled,
    List,
    Management,
    Menu,
    Platform,
    Setting,
    SwitchButton,
    TrendCharts,
    User
} from '@element-plus/icons-vue';
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
import * as routers from "../data/router";

// Props
interface Props {
    icon?: string
    teamName?: string
    user?: any
    isAdmin: boolean
    navPermissions?: string[]
    userMenuPermissions?: string[]
    routerNames?: string[]
    update?: boolean
    teamList?: any[]
    currentTeam?: any
}

const props = withDefaults(defineProps<Props>(), {
    icon: '',
    teamName: '码客行',
    user: null,
    navPermissions: () => [],
    userMenuPermissions: () => [],
    routerNames: () => [],
    update: false,
    teamList: () => [],
    currentTeam: null
})

// Emits
const emit = defineEmits<{
    userAction: [command: string]
    management: []
    teamChange: [teamId: number]
}>()

// 移动端状态
const isMobile = ref(false)
const menuVisible = ref(false)

// 判断是否为 acCoderSaas (通过 teamList 的存在来判断)
const isAcCoderSaas = computed(() => {
    return props.teamList && props.teamList.length > 0
})

// 团队选择状态
const selectedTeamId = ref(props.currentTeam?.ID)

const checkMobile = () => {
    isMobile.value = window.innerWidth <= 768
}

// 监听当前团队变化
watch(() => props.currentTeam?.ID, (newId) => {
    selectedTeamId.value = newId
})

// ojSass 导航项配置
const navItems = computed(() => [
    {
        name: '首页',
        label: '首页',
        icon: HomeFilled,
        to: { path: '/home' },
        visible: checkNavPermission('首页')
    },
    {
        name: '题库',
        label: '题库',
        icon: Grid,
        to: routers.question,
        visible: checkNavPermission('题库')
    },
    {
        name: '题单',
        label: '专题',
        icon: List,
        to: routers.questionbank,
        visible: checkNavPermission('题单')
    },
    {
        name: '任务',
        label: '任务',
        icon: Checked,
        to: routers.task,
        visible: checkNavPermission('任务')
    },
    {
        name: '比赛',
        label: '比赛',
        icon: Flag,
        to: routers.activity,
        visible: checkNavPermission('比赛')
    },
    {
        name: '评测',
        label: '评测',
        icon: TrendCharts,
        to: routers.assessment,
        visible: props.isAdmin ? checkNavPermission('评测') : !!props.routerNames.find(e => e === '评测')
    },
    {
        name: '云课堂',
        label: '云课堂',
        icon: Platform,
        to: routers.cloudClass,
        visible: checkNavPermission('云课堂') && !props.update
    }
])

// 用户操作配置
const userActions = computed(() => [
    {
        command: 'u',
        label: '个人中心',
        icon: User,
        visible: checkUserMenuPermission('个人中心'),
        danger: false
    },
    {
        command: 'a',
        label: '管理我的题目',
        icon: Grid,
        visible: checkUserMenuPermission('管理我的题目'),
        danger: false
    },
    {
        command: 'd',
        label: '修改个人信息',
        icon: Setting,
        visible: true,
        danger: false
    },
    {
        command: 'b',
        label: '退出登录',
        icon: SwitchButton,
        visible: true,
        danger: true
    }
])

// 管理项可见性
const managementVisible = computed(() => {
    return checkNavPermission('管理') && props.isAdmin
})

// 权限检查函数
function checkNavPermission(name: string): boolean {
    return !props.navPermissions.includes(name)
}

function checkUserMenuPermission(name: string): boolean {
    return !props.userMenuPermissions.includes(name)
}

// 事件处理
function closeMenu() {
    menuVisible.value = false
}

function handleAction(command: string) {
    menuVisible.value = false
    emit('userAction', command)
}

function handleManagement() {
    menuVisible.value = false
    emit('management')
}

function handleTeamChange(teamId: number) {
    emit('teamChange', teamId)
}

// 生命周期
onMounted(() => {
    checkMobile()
    window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
    window.removeEventListener('resize', checkMobile)
})
</script>

<style scoped>
/* 响应式控制 - 组件特有 */
@media (max-width: 768px) {
    .mobile-nav {
        display: block;
    }
}

@media (min-width: 769px) {
    .mobile-nav {
        display: none !important;
    }
}
</style>
